<template>
	<view>
		<view class="top-con flex align-center justify-center">
			<view @click="select(0)" :class="selectInd==0?'topAction':''" class="top flex align-center">
				<text>商品</text>
				<view></view>
			</view>
			<view @click="select(1)" :class="selectInd==1?'topAction':''" class="top flex align-center">
				<text>详情</text>
				<view></view>
			</view>
		</view>
		<view id="scroll">
			<view id="content" class="flex flex-direction">
				<view class="swiper-con">
					<swiper @change="swiperChange" class="screen-swiper flex align-center justify-center" :indicator-dots="false"
					 :circular="true" :autoplay="true" interval="5000" duration="500">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<!-- <image :src="item.url" v-if="item.type=='image'"></image> -->
							<image :src="item.img_url" mode="aspectFit"></image>
						</swiper-item>
					</swiper>
					<view class="num flex align-center justify-center"><text>{{current+1}}</text> /{{swiperList.length}}</view>
				</view>
				<view class="goods-title flex flex-direction">
					<view class="goods-title-top flex align-center">
						<text>{{goodsDetailItem.title?goodsDetailItem.title:''}}</text>
						<view @click="showShare" open-type="share" class="flex flex-direction align-center justify-center">
							 <!-- <button class="bg-white lg text-gray cuIcon-share"  style="outline: none;" open-type="share"></button> -->
							<!-- <text class="lg text-gray cuIcon-share" open-type="share"></text> -->
							<!-- <text>分享</text> -->
						</view>
						<view class="flex flex-direction align-center justify-center">
							<text class="lg text-gray cuIcon-favor" @tap="saveCollectoin"></text>
							<text @tap="saveCollectoin">收藏</text>
						</view>
					</view>
					<text class="text-price">{{goodsDetailItem.price?goodsDetailItem.price:''}} </text>
					<view class="goods-title-bto flex align-center justify-between">
						<text>月销量：{{goodsDetailItem.sales?goodsDetailItem.sales:''}}件</text>
						<text>商品数量：{{goodsDetailItem.stock?goodsDetailItem.stock:''}}件</text>
						<text>商品重量：{{goodsDetailItem.dyskulist[0].guige?goodsDetailItem.dyskulist[0].guige:''}}</text>
					</view>
				</view>
				<view @click="showSpecs" class="goods-specs flex align-center justify-between">
					<text>选择规格数量</text>
					<text class="lg text-gray cuIcon-right"></text>
				</view>
				<view class="goods-evaluate">
					<view class="goods-evaluate-title">交易评价（{{goodsDetailItem.eva_num?goodsDetailItem.eva_num:'0'}}）</view>
					<view class="goods-evaluate-nohave">
						暂无评价，快来写个评价吧！
					</view>
					<view class="evaluate">
						<view class="evaluate-top flex align-center">
							<image :src="goodsEvaItem.avatar"></image>
							<text>{{goodsEvaItem.nick_name}}</text>
						</view>
						<view class="evaluate-val">{{goodsEvaItem.content}}</view>
						<view class="evaluate-num flex justify-between">
							<text>{{goodsEvaItem.addtime}}</text>
							<text>规格：{{goodsEvaItem.goods_guige?goodsEvaItem.goods_guige:'0'}}片</text>
						</view>
					</view>
					<view class="lookAll flex align-center justify-center">
						<view @tap='toAllEvaluation'>查看全部评价</view>
					</view>
					<view class="ask-con flex flex-direction">
						<!-- <view class="ask-item flex align-center">
							<image src="/static/b9.png"></image>
							<text>面膜会过敏吗</text>
						</view>
						<view class="ask-item flex align-center">
							<image src="/static/b9.png"></image>
							<text>面膜会过敏吗</text>
						</view> -->
					</view>
				</view>
			</view>

			<view id="delite" class="detail flex flex-direction">
				<u-parse :content="goodsDetail" :className="className" @preview="preview" @navigate="navigate"></u-parse>
			</view>
		</view>

		<view style="height: 120upx;"></view>
		<view class="goods-btn flex align-center">
			<view class="flex flex-direction align-center justify-center">
				<text class="lg cuIcon-favor" :class="is_collect?'text-red':'text-gray'" @tap="saveCollectoin"></text>
				<text @tap="saveCollectoin">收藏</text>
			</view>
			<view class="flex flex-direction align-center justify-center" @tap='toShopCart'>
				<text class="lg text-gray cuIcon-cart"></text>
				<text>购物车</text>
				<view class="cartNum">{{cartNum}}</view>
			</view>
			<view @click="showPop" class="flex flex-direction align-center justify-center">加入购物车</view>
			<view @click="pay" class="flex flex-direction align-center justify-center">立即购买</view>
		</view>
		<!-- <view style="height: 88upx;"></view> -->
		<view style="z-index: 999;" v-if="isShowShare" class="popup">
			<view class="pop-share flex align-center justify-around">
				<view class="share-item flex flex-direction align-center" @tap="toShare('朋友圈')">
					<image src="/static/b10.png"></image>
					<text>朋友圈</text>
				</view>
				<view class="share-item flex flex-direction align-center" @tap="toShare('微信好友')">
					<image src="/static/b11.png"></image>
					<text>微信好友</text>
				</view>
				<view class="share-item flex flex-direction align-center" @tap="toShare('新浪微博')">
					<image src="/static/b12.png"></image>
					<text>新浪微博</text>
				</view>
				<view class="share-item flex flex-direction align-center" @tap="toShare('QQ好友')">
					<image src="/static/b13.png"></image>
					<text>QQ好友</text>
				</view>
			</view>
			<view @click="close" class="pop-btn">
				取消
			</view>
		</view>
		<view v-if="isShowSpecs" style="z-index: 777;" class="popup">
			<view class="pop-specs">
				<view class="pop-specs-top flex align-center">
					<image :src="goodsDetailItem.img_url"></image>
					<view class="flex flex-direction">
						<view class="text-price">{{goodsDetailItem.price}} </view>
						<view>请选择颜色规格</view>
					</view>
					<text @click="close" class="lg text-gray cuIcon-roundclose"></text>
				</view>
				<view class="select-specs flex flex-direction">
					<text>规格分类</text>
					<view style="display: flex;">
						<view class="spec_list"  v-for="(item,index) in goodsDetailItem.dyskulist" @click="changeguige(item)">
							<view :class="item.sku_id==sku_id?'active ':''" :date-id="item.sku_id" :data-price="item.price">{{item.guige}} </view>
						</view>
					</view>
					<!-- <view class="select-specs-c flex align-center">
						<view class="active">{{goodsDetailItem.dyskulist[0].guige}}</view>
					</view> -->
				</view>
				<view class="specs-num flex align-center justify-between">
					<text>选择数量</text>
					<view class="nums align-center flex">
						<view @click="reduce">-</view>
						<view>{{num}}</view>
						<view @click="add">+</view>
					</view>
				</view>
			</view>
		</view>
		<view class="popup" v-if="isShowPop">
			<view class="pop_spec hide">
				<view class="sku_pro">
					<view @click="close" class="close"></view>
					<view class="img">
						<image :src="goodsDetailItem.img_url" alt="" />
					</view>
					<view class="txt">
						<text class="price">￥<text id="price">{{goodsDetailItem.price}} </text></text>
						<text class="selected">请选择：规格</text>
					</view>
				</view>
				<view class="sku_info">
					<view class="con">
						<text>规格分类</text>
						<view style="display: flex;">
							<view class="spec_list"  v-for="(item,index) in goodsDetailItem.dyskulist" @click="changeguige(item)">
								<view :class="item.sku_id==sku_id?'active ':''" :date-id="item.sku_id" :data-price="item.price">{{item.guige}} </view>
							</view>
						</view>
						
					</view>
					<view class="con">
						<text class="fl">选择数量</text>
						<view class="count_box fr">
							<view @click="reduce" class="minus flex align-center justify-center" style="text-align: center;">-</view>
							<text style="line-height: 40upx;width: 40upx;text-align: center;">{{num}}</text>
							<view @click="add" class="plus flex align-center justify-center" style="text-align: center;">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="popup" v-if="isShowPop_new">
			<view class="pop_spec hide">
				<view class="sku_pro">
					<view @click="close" class="close"></view>
					<view class="img">
						<image :src="goodsDetailItem.img_url" alt="" />
					</view>
					<view class="txt">
						<text class="price">￥<text id="price">{{goodsDetailItem.price}} </text></text>
						<text class="selected">请选择：规格</text>
					</view>
				</view>
				<view class="sku_info">
					<view class="con">
						<text>规格分类</text>
						<view style="display: flex;">
							<view class="spec_list"  v-for="(item,index) in goodsDetailItem.dyskulist" @click="changeguige(item)">
								<view :class="item.sku_id==sku_id?'active ':''" :date-id="item.sku_id" :data-price="item.price">{{item.guige}} </view>
							</view>
						</view>
						
					</view>
					<view class="con">
						<text class="fl">选择数量</text>
						<view class="count_box fr">
							<view @click="reduce_" class="minus flex align-center justify-center" style="text-align: center;">-</view>
							<text style="line-height: 40upx;width: 40upx;text-align: center;">{{num}}</text>
							<view @click="add_" class="plus flex align-center justify-center" style="text-align: center;">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				refreshing: false,
				goodsDetail: '',
				goodsEvaList: [],
				goodsEvaItem: '',
				goodsDetailItem: '',
				user: '',
				isShowPop: false,
				current: 0,
				selectInd: 0,
				isShowSpecs: false,
				isShowShare: false,
				value: 1,
				toView: "",
				num:1,
				cartNum:0,
				deliteTop: 0,
				autoHeight: 0,
				isPayShow:false,
				swiperList: [{
					id: 0,
					type: 'image',
					img_url: ''
				}],
				className: "gcontent",
				sku_id:'',
				is_collect:false,
				isShowPop_new:false
			}
		},
		created() {
			var that = this
			const query = uni.createSelectorQuery()
			query.select('#delite').boundingClientRect()
			query.selectViewport().scrollOffset()
			query.exec(function(res) {
				that.deliteTop = res[0].top
				this.deliteTop = res[0].top
				console.log(this.deliteTop)
			})
		},
		onReachBottom() {
			console.log('滑动到页面底部')
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.refreshing = true;
			this.loadUser()
		},
		onShow() {
		  this.loadCarNum()
		},
		onLoad(options) {
			if (!options.id) {
				return;
			}
			this.id = options.id
			console.log(this.id)
			this.loadUser()
			this.loadGoodsListById()
			this.loadGoodsEvaList()
			this.loadGoodsDetail()
			this.loadCollectInfo()
	
		},
		onShareAppMessage(res) {
			console.log('onShareAppMessage:'+JSON.stringify(res)) 
		},
		methods: {
			loadCollectInfo(){
				api.get({
					url: 'Goods/GetCollectID?user_id='+this.user.user_id+'&obj_id='+this.id,
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.is_collect = true
						}
					}
				});
			},
			loadCarNum: function(){
				api.get({
					url: 'Goods/GetShoppingCartCount?user_id='+this.user.user_id,
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.cartNum = data.Response.total_num
						}
					}
				});
			},
			/**
			 * 加载商品详情
			 */
			loadGoodsListById: function() {
				api.get({
					url: 'Goods/GetGoodsDetailContent',
					data: {
						goods_id: this.id
					},
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.goodsDetail = data.Response.content
						}
					}
				});
			},
			/**
			 * 加载商品参数
			 */
			loadGoodsDetail: function() {
				api.get({
					url: 'Goods/GetGoodsDetail',
					data: {
						goods_id: this.id,
						user_id: 0,//this.user.user_id
					},
					success: data => {
						console.log('loadGoodsDetail' + JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.goodsDetailItem = data.Response
							this.swiperList = this.goodsDetailItem.dyimglist
							if(this.goodsDetailItem.cart_num>0){
								//this.cartNum = this.goodsDetailItem.cart_num
								this.num = this.cartNum
							}else{
								//this.cartNum = 1
								this.num = 1
							}
							
						}
					}
				});
			},
			/**
			 * 加载商品评价
			 */
			loadGoodsEvaList: function() {
				api.get({
					url: 'Goods/GetGoodsEvaList',
					data: {
						goods_id: this.id,
						type: 1,
						page: 1,
						pagesize: 15
					},
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.goodsEvaList = data.Response
							this.goodsEvaItem = this.goodsEvaList[0]
						}
					}
				});
			},
			/**
			 * 保存购物商品
			 */
			prePayCart: function() {
				api.post({
					url: 'Order/PostOrderSave_New?order_type=1&message=&point_pay=0&is_invoice=1&invoice_title=&user_id=' + this.user.user_id,
					data: {
						data: [{
							cart_id: 0,
							goods_id: this.id,
							goods_img_url: this.goodsDetailItem.img_url,
							price: this.goodsDetailItem.price,
							ratio_price: 0,
							totle_price: (this.goodsDetailItem.price*this.num),
							goods_type: 1,
							quantity: this.num,
							sku_id: this.sku_id
						}]

					},
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {

						}
					}
				});
			},
			changeguige(item){
				this.sku_id = item.sku_id
			},
			/**
			 * 添加商品到购物车
			 */
			addCart: function(type=0) {
				
				console.log('goodsDetail addCart cartNum:' + this.cartNum)
				var dataTemp = {
						goods_id: this.id,
						goods_type: 1,
						sku_id: this.sku_id,
						user_id: this.user.user_id,
						quantity: this.num

					}
				console.log('goodsDetail addCart dataTemp:' +JSON.stringify(dataTemp))
				api.get({
					url: 'Goods/GetShoppingCartAdd',
					data:dataTemp,
					success: data => {
						console.log('addCart' + JSON.stringify(data));
						if (data.ErrCode == 0) {
							if(type<1){
								uni.showToast({
									title:'添加购物车成功'
								})
								this.loadCarNum()
							}
						}else{
							if(type<1){
								uni.showToast({
									title:'添加购物车失败'
								})
							}
						}
					}
				});
			},
			loadUser: function() {
				try {
					this.user = uni.getStorageSync('user');
					console.log(this.user);
					this.refreshing = false;
					uni.stopPullDownRefresh();
				} catch (e) {}
			},
			saveCollectoin: function() {
				if(this.user == '' || !this.user.user_id){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}

				api.get({
					url: 'User/GetCollectAdd',
					data: {
						goods_id: this.id,
						collect_type: 1,
						user_id: this.user.user_id,

					},
					success: data => {
						console.log('saveCollectoin' + JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.is_collect = true;
							uni.showToast({
								title: '收藏成功'
							})
						}
					}
				});
			},
			pay: function() {
				if(this.user == '' || !this.user.user_id){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				if(!this.isPayShow){
					this.isShowPop_new = true
					this.isPayShow = true
					return
				}
				if(this.sku_id==''){
					return uni.showToast({
						title:"请选择规格",
						icon:"none"
					})
				}
				if (this.num <= 0) {
					uni.showToast({
						title: '请选择商品加入购物',
						duration: 2000
					})
				} else {
					this.isShowPop_new = false
					if (!this.user.user_id) {
						uni.showToast({
							title: '请登录',
							duration: 2000
						})
						return;
					}
					//this.addCart(1)
					this.prePayCart()
					var dataTemp = [{
						cart_id: 0,
						goods_id: this.id,
						goods_type: 1,
						quantity: this.num,
						sku_id: this.sku_id
					}]
					console.log('goodsDetails pay dataTemp' + JSON.stringify(dataTemp))
					api.post({
						url: 'Order/PostOrderShow_new?user_id=' + this.user.user_id,
						data: {
							data: dataTemp,

						},
						success: data => {
							uni.hideLoading();
							console.log('goodsDetails pay' + JSON.stringify(data));
							if (data.ErrCode == 0) {
								uni.navigateTo({
									url: '/pages/confirmOrder/confirmOrder?key=' + JSON.stringify(data.Response)
								})
							}
						}
					});
				}
			},
			toShopCart: function() {
				if(this.user == '' || !this.user.user_id){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				
				//if(this.num>0){
				//	this.addCart()
				//}
				uni.switchTab({
					url: '/pages/shopCart/shopCart'
				})
			},
			toShare: function(it) {
				console.log('toShare:' + it)
				var dataTemp = {
					share_img: '',
					share_title: '',
					share_url: '',
					share_zhaiyao: ''
				}
				api.get({
					url: 'Goods/GetShare',
					data: {
						goods_id: this.id
					},
					success: data => {
						console.log('toShare' + JSON.stringify(data));
						if (data.ErrCode == 0) {
							dataTemp = data.Response
							if (it == '朋友圈') {
								uni.share({
									provider: "weixin",
									scene: "WXSceneSession",
									type: 0,
									href: dataTemp.share_url, 
									title: dataTemp.share_title,
									summary: dataTemp.share_zhaiyao,
									imageUrl: dataTemp.share_img,
									success: function(res) {
										console.log("success:" + JSON.stringify(res));
										uni.showToast({
											title:'分享成功'
										})
									},
									fail: function(err) {
										console.log("fail:" + JSON.stringify(err));
										uni.showToast({
											title:'分享失败'
										})
									}
								});
							
							} else if (it == '微信好友') {
								uni.share({
									provider: "weixin",
									scene: "WXSenceTimeline",
									type: 0,
									href: dataTemp.share_url, 
									title: dataTemp.share_title,
									summary: dataTemp.share_zhaiyao,
									imageUrl: dataTemp.share_img,
									success: function(res) {
										console.log("success:" + JSON.stringify(res));
										uni.showToast({
											title:'分享成功'
										})
									},
									fail: function(err) {
										console.log("fail:" + JSON.stringify(err));
										uni.showToast({
											title:'分享失败'
										})
									}
								});
							
							} else if (it == '新浪微博') {
								uni.share({
									provider: "sinaweibo",
									scene: "",
									type: 0,
									href: dataTemp.share_url, 
									title: dataTemp.share_title,
									summary: dataTemp.share_zhaiyao,
									imageUrl: dataTemp.share_img,
									success: function(res) {
										console.log("success:" + JSON.stringify(res));
										uni.showToast({
											title:'分享成功'
										})
									},
									fail: function(err) {
										console.log("fail:" + JSON.stringify(err));
										uni.showToast({
											title:'分享失败'
										})
									}
								});
							
							} else if (it == 'QQ好友') {
								uni.share({
									provider: "qq",
									scene: "",
									type: 0,
									href: dataTemp.share_url, 
									title: dataTemp.share_title,
									summary: dataTemp.share_zhaiyao,
									imageUrl: dataTemp.share_img,
									success: function(res) {
										console.log("success:" + JSON.stringify(res));
										uni.showToast({
											title:'分享成功'
										})
									},
									fail: function(err) {
										console.log("fail:" + JSON.stringify(err));
										uni.showToast({
											title:'分享失败'
										})
									}
								});
							
							}
							
							
							
						}
					}
				});
				
			},
			preview: function(src, e) {
				// do something
			},
			navigate: function(href, e) {
				// do something
			},
			toAllEvaluation: function() {
				uni.navigateTo({
					url: '/pages/allEvaluation/allEvaluation?id=' + this.id
				})
			},
			onPageScroll: function(object) {
				console.log(object.scrollTop)
				console.log(this.deliteTop)
				if (this.deliteTop < object.scrollTop + 120) {
					this.selectInd = 1
				} else if (this.deliteTop > object.scrollTop) {
					this.selectInd = 0
				}
			},
			reduce: function() {
				if (this.num > 0) {
					this.num = --this.num
					this.cartNum = --this.cartNum
				}
			},
			add: function() {
				this.num = ++this.num
				this.cartNum=++this.cartNum
				this.addCart()
			},
			
			reduce_: function() {
				if (this.num > 0) {
					this.num = --this.num
				}
			},
			add_: function() {
				console.log('xxcxcx');
				this.num = ++this.num
			},
			
			
			showShare: function() {
				// this.isShowShare = true
			},
			showSpecs: function() {
				this.isShowSpecs = true
			},
			showPop: function() {
				if(this.user == '' || !this.user.user_id){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				console.log(this.isShowPop)
				if (this.isShowPop) {
					this.isShowPop = false
					if(this.user == '' || !this.user.user_id){
						uni.navigateTo({
							url:'/pages/login/login'
						})
						return
					}
					
					if(this.num>0){
						this.addCart()
					}
				} else {
					this.isShowPop = true
				}
				console.log(this.isShowPop)

			},

			close: function() {
				this.isShowShare = false
				this.isShowSpecs = false
				this.isShowPop = false
			},
			select: function(ind) {
				this.selectInd = ind
				if (ind == 1) {
					uni.createSelectorQuery().select('#delite').boundingClientRect(data => { //目标位置节点 类或者 id
						uni.createSelectorQuery().select("#scroll").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 0, //过渡时间
								scrollTop: data.top - res.top, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				} else {
					uni.createSelectorQuery().select('#content').boundingClientRect(data => { //目标位置节点 类或者 id
						uni.createSelectorQuery().select("#scroll").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 100, //过渡时间
								scrollTop: data.top - res.top, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				}
			},
			swiperChange: function(e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/components/u-parse/u-parse.css");
	.gcontent{
		image{
			display: block;
		}
		
	}
	image {
	    display: block !important;
	}
	.sku_pro .img image {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.sku_pro .close {
		width: 40upx;
		height: 40upx;
		display: block;
		background: url(@/static/icon19.png) no-repeat;
		background-size: 40upx 40upx;
		position: absolute;
		right: 20upx;
		top: 20upx;
	}

	.sku_pro .price {
		font-size: 24upx;
		color: #ed0000;
	}

	.sku_pro .selected {
		font-size: 24upx;
		color: #666;
		margin-top: 10upx
	}

	.sku_pro .txt {
		margin-left: 220upx;
		padding-top: 30upx;
	}

	.sku_pro:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		font-size: 0;
	}

	.sku_info {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.sku_info .con {
		padding: 20upx 0;
		border-bottom: 1px solid #ddd;
	}

	.sku_info .con {
		padding: 20upx 0;
		border-bottom: 1px solid #ddd;
	}

	.sku_info .con text {
		font-size: 28upx;
		color: #333;
	}

	.spec_list {
		margin: 5px 5px 0;
		font-size: 0;
	}

	.spec_list view.active {
		background: #ff80bf;
	}

	.spec_list view.active {
		background: $btn-bground;
		color: #fff;
	}

	.spec_list view {
		display: inline-block;
		vertical-align: top;
		height: 60upx;
		line-height: 60upx;
		padding: 0 20upx;
		background: #efeff4;
		border-radius: 3px;
		font-size: 24upx;
		color: #666;
		margin: 5px;
	}

	.sku_pro .img {
		width: 200upx;
		height: 160upx;
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		margin-top: -20upx;
		float: left;
		position: relative;
	}

	.sku_info .con:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		font-size: 0;
	}

	.sku_pro {
		border-bottom: 1px solid #ddd;
		padding-bottom: 20upx;
	}

	.pop_spec {
		width: 100%;
		max-height: 90%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 20upx 120upx 20upx;
		background: #fff;
		z-index: 11;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.popup {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 100;
	}

	.specs-num {
		border-bottom: 1upx solid #ddd;
		height: 90upx;
	}

	.count_box {
		display: flex;
	}

	.count_box input {
		text-align: center;
		width: 40upx;
	}

	.count_box .minus {
		background: url(@/static/jian.png) no-repeat center center;
		background-size: 20upx 20upx;
	}

	.count_box .minus,
	.count_box .plus {
		width: 40upx;
		height: 40upx;
		display: inline-block;
		vertical-align: top;
		border: 1px solid #ddd;
		border-radius: 40upx;
	}

	.count_box .plus {
		background: url(@/static/jia.png) no-repeat center center;
		background-size: 20upx 20upx;
	}

	.count_box .minus,
	.count_box .plus {
		width: 40upx;
		height: 40upx;
		display: inline-block;
		vertical-align: top;
		border: 1px solid #ddd;
		border-radius: .4rem;
	}

	.specs-num>text {
		font-size: 28upx;
		color: #000000;
	}

	.nums {
		width: 200upx;
		height: 50upx;
		border-radius: 10upx;
		border: solid 1upx #cccccc;
	}

	.nums>view:nth-child(1),
	.nums>view:nth-child(3) {
		width: 50upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
		font-size: 28upx;
		color: #333333;
	}

	.nums>view:nth-child(2) {
		width: 100upx;
		text-align: center;
		line-height: 50upx;
		border-left: solid 1upx #cccccc;
		border-right: solid 1upx #cccccc;
		font-size: 28upx;
		color: #333333;
	}

	.select-specs>text {
		font-size: 28upx;
		color: #000000;
	}

	.select-specs {
		padding: 30upx 0;
		border-bottom: 1upx solid #ddd;
	}

	.select-specs-c {
		margin-top: 22upx;
	}

	.select-specs-c>view {
		width: 160upx;
		height: 60upx;
		background-color: #efeff4;
		border-radius: 5upx;
		text-align: center;
		line-height: 60upx;
		font-size: 24upx;
		color: #666666;
		margin-right: 20upx;
	}

	.pop-specs-top>text {
		position: absolute;
		top: 30upx;
		right: 0;
		font-size: 36upx;
	}

	.pop-specs-top>view {
		margin-left: 20upx;
	}

	.pop-specs-top>view>view:nth-child(1) {
		font-size: 32upx;
		color: #f70000;
		font-weight: 500;
	}

	.pop-specs-top>view>view:nth-child(2) {
		font-size: 24upx;
		color: #666666;
		margin-top: 10upx;
	}

	.pop-specs-top {
		border-bottom: 1upx solid #ddd;
		width: 100%;
		height: 160upx;
		position: relative;
	}

	.pop-specs-top image {
		width: 187upx;
		height: 160upx;
		border-radius: 5upx;
		margin-top: -40upx;
	}

	.pop-specs {
		padding: 0 20upx;
		width: 100%;
		height: 530upx;
		background-color: #fff;
		position: absolute;
		bottom: 100upx;
	}

	.pop-btn {
		width: 710upx;
		height: 81upx;
		background-color: #ffffff;
		border-radius: 15upx;
		text-align: center;
		line-height: 81upx;
		left: 20upx;
		bottom: 20upx;
		position: absolute;
	}

	.pop-share {
		position: absolute;
		bottom: 124upx;
		width: 710upx;
		left: 20upx;
		height: 284upx;
		background-color: #ffffff;
		border-radius: 15upx;
	}

	.share-item image {
		width: 105upx;
		height: 105upx;
	}

	.share-item>text {
		font-size: 24upx;
		color: #141414;
		margin-top: 14upx;
	}

	.popup {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.3);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.ask-con {
		padding: 10upx 0;
		border-top: 1upx solid #ddd;
		margin-top: 20upx;
	}

	.ask-item {
		margin-top: 10upx;
		margin-bottom: 10upx;
	}

	.ask-item image {
		width: 30upx;
		height: 30upx;
	}

	.ask-item text {
		margin-left: 6upx;
	}

	.lookAll>view {
		width: 220upx;
		height: 58upx;
		border-radius: 5upx;
		border: 1upx solid $btn-bground;
		text-align: center;
		line-height: 58upx;
		color: $btn-bground;

	}

	.evaluate-num>text {
		font-size: 24upx;
		color: #999999;
		margin-top: 20upx;
	}

	.evaluate-val {
		font-size: 26upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		font-size: 26upx;
		color: #000000;
	}

	.evaluate-top image {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
	}

	.evaluate-top text {
		font-size: 26upx;
		color: #000000;
		margin-left: 18upx;
	}

	.goods-evaluate-nohave {
		font-size: 26upx;
		margin: 20upx 0;
		color: #999999;
	}

	.goods-evaluate {
		margin-top: 20upx;
		padding: 20upx 30upx;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;

	}

	.goods-btn>view:nth-child(1),
	.goods-btn>view:nth-child(2) {
		width: 115upx;
		height: 100upx;
		border-right: 1px solid #ddd;
	}

	.goods-btn>view:nth-child(1)>text:nth-child(1),
	.goods-btn>view:nth-child(2)>text:nth-child(1) {

		font-size: 34upx;
	}

	.goods-btn>view:nth-child(1)>text:nth-child(2),
	.goods-btn>view:nth-child(2)>text:nth-child(2) {
		line-height: 42upx;
		font-size: 24upx;
		color: #666666;
	}

	.goods-btn>view:nth-child(2) {
		position: relative;
	}

	.cartNum {
		position: absolute;
		right: 20upx;
		top: 10upx;
		width: 24upx;
		height: 24upx;
		background-color: $btn-bground;
		border-radius: 50%;
		text-align: center;
		line-height: 24upx;
		color: #fff;
		font-size: 18upx;
	}

	.goods-btn>view:nth-child(3) {
		background-color: $btn-bground-a;
	}

	.goods-btn>view:nth-child(4) {
		background-color: $btn-bground;
	}

	.goods-btn>view:nth-child(4),
	.goods-btn>view:nth-child(3) {
		width: 260upx;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		color: #fff;
	}

	.goods-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 100upx;
		z-index: 888;
	}

	.goods-specs {
		width: 100%;
		height: 76upx;
		background-color: #fff;
		margin-top: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.goods-specs>text:nth-child(1) {
		font-size: 30upx;
		color: #000000;
	}

	.goods-title-bto text {
		font-size: 24upx;
		color: #999999;
		margin-top: 30upx;
	}

	.goods-title>text {
		font-size: 34upx;
		font-weight: 500;
		color: #ed0000;
		margin-top: 30upx;
	}

	.goods-title-top>text {
		width: 513upx;
		font-size: 32upx;
		color: #000000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-title-top>view {
		width: 90upx;
	}

	.goods-title-top>view:nth-child(2) {
		border-right: 1upx solid #ddd;
		margin-left: 30upx;
	}

	.goods-title-top>view>text:nth-child(1) {
		color: #a5a5a5;
		font-size: 30upx;
	}

	.goods-title-top>view>text:nth-child(2) {
		font-size: 20upx;
		color: #666666;
		margin-top: 6upx;
	}

	.goods-title {
		padding: 25upx 22upx 36upx 22upx;
		box-sizing: border-box;
		height: 266upx;
		background-color: #ffffff;
	}

	.swiper-con {
		position: relative;
		margin-top:70upx;
	}

	.num>text {
		font-size: 36upx;
	}

	.num {
		color: #fff;
		border-radius: 50%;
		width: 70upx;
		height: 70upx;
		background-color: #9a9a9a;
		position: absolute;
		right: 26upx;
		bottom: 26upx;
	}

	.screen-swiper image {
		width: 100%;
		height: 625upx;
	}

	.screen-swiper {
		width: 100%;
		height: 625upx;
	}

	.detail image {
		width: 100%;
	}

	.topAction>view {
		width: 69upx;
		height: 4upx;
		background-color: #000000;
		position: absolute;
		bottom: 0;
	}

	.top {
		height: 88upx;
		position: relative;
	}

	.top text {
		font-size: 36upx;
		color: #000000;
	}

	.top-con {
		z-index: 99;
		position: fixed;
		top: 0;
		width: 100%;
		height: 88upx;
		background-color: #fff;
	}

	.top-con>view:nth-child(2) {
		margin-left: 75upx;
	}
</style>
